<template>
  <div>
    <el-form label-position="left" label-width="100px" style="width:100%;">
      <el-form-item label="操作类型：">{{ formData.operation | operationFilter }}</el-form-item>
      <el-form-item label="操作内容：">{{ formData.content }}</el-form-item>
      <el-form-item label="操作用户：">{{ formData.createUser }}</el-form-item>
      <el-form-item label="IP：">{{ formData.ip }}</el-form-item>
      <el-form-item label="路由地址：">{{ formData.url }}</el-form-item>
      <el-form-item label="参数：">{{ formData.params }}</el-form-item>
      <el-form-item label="时间：">{{ formData.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon-close" @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getSysWeblogDetail } from '@/api/weblog';
import waves from '@/directive/waves';

var that;

export default {
  name: 'SysWeblogDetail',
  directives: { waves },
  filters: {
    operationFilter(item) {
      const operationKeyValue = that.operationOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.label;
        return acc;
      }, {});
      return operationKeyValue[item];
    }
  },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      operationOptions: [{ label: '访问', key: 0 }, { label: '登录', key: 1 }, { label: '新增', key: 2 }, { label: '更新', key: 3 }, { label: '删除', key: 4 }, { label: '导出', key: 5 }, { label: '导入', key: 6 }],
      formData: {
      }
    };
  },
  created() {
    that = this;
    if (this.id) {
      this.getDetail(this.id);
    }
  },
  methods: {
    async getDetail(id) {
      await getSysWeblogDetail(id).then(response => {
        this.formData = response.data;
      });
    },
    cancel() {
      this.$emit('cancelClose', false, 'edit');
    }
  }
};
</script>
